<!DOCTYPE html>
<html>
<head>
<title>Paint Board</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="b" oncontextmenu="return false;" onselectstart="return false;">
<canvas id='canvas' style="border:2px solid blue;margin:2px"></canvas>
<select id="mySelect" style="border :1px solid #aaa;" onchange="myChangeColor()">
		<option value="red">RED</option>
		<option value="orange">ORANGE</option>
		<option value="yellow">YELLOW</option>
		<option value="green">GREEN</option>
		<option value="blue">BLUE</option>
		<option value="purple">PURPLE</option>
		<option value="black">BLACK</option>
		<option value="white">ERASER</option>
	</select>
	<input id="myInput" value = '4' type = 'text' onchange = "myChangeWidth()"/>
<div>
<button id='c'>clear</button>
</div>
<script>
var bbbb = document.getElementById('b');
var canvas = document.getElementById('canvas');
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mouseout',onMouseOut,false);
canvas.addEventListener('mouseover',onMouseIn,false);//冒泡
bbbb.addEventListener('mouseup',onMouseUpBBBB,true);//捕获


canvas.addEventListener('touchstart',onMouseDown,false);
canvas.addEventListener('touchmove',onMouseMove,false);
canvas.addEventListener('touchend',onMouseUp,false)
 
 
canvas.height = 300;
canvas.width = getWidth() - 50;
var ctx = canvas.getContext('2d');
 /*
ctx.lineWidth = 3.0; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
*/
 var myLineColor = 'red' ;
var myLineWidth = 4;

function myChangeColor()
{
	myLineColor = document.getElementById('mySelect').value;
}
function myChangeWidth()
{
	myLineWidth = document.getElementById('myInput').value;
}
var flagDownBig = false;
var flagDownSmall = false;
var flagIn =false;
function onMouseMove(evt)
{
evt.preventDefault();
if (flagDownBig && flagIn)
{
var p = pos(evt);
ctx.lineTo(p.x, p.y);
ctx.lineWidth = 6.0; // 设置线宽
//ctx.shadowColor = "#CC0000";
	//cxt.shadowColor = myLineColor;
ctx.shadowBlur = 1;
//ctx.shadowOffsetX = 6;
ctx.stroke();
}
}
 
function onMouseDown(evt)
{
evt.preventDefault();
ctx.beginPath();
ctx.strokeStyle = myLineColor;
		ctx.lineWidth = myLineWidth;
var p = pos(evt);
ctx.moveTo(p.x, p.y);
flagDownBig = true;
flagDownSmall = true;
}
 
 
function onMouseUp(evt)
{
evt.preventDefault();
flagDownBig = false;
flagDownSmall = false;
}
 
function onMouseIn(evt)
{
	evt.preventDefault();
	flagIn = true;

if(flagDownSmall == true){
flagDownBig = true;
}

}
function onMouseOut(evt)
{
	evt.preventDefault();
	flagIn = false;
	flagDownBig = false;
}
var clear = document.getElementById('c');

clear.addEventListener('click',function()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
},false);
 
 
function onMouseUpBBBB(evt)
{
	evt.preventDefault();
	flagDownBig = false;
	flagDownSmall = false;
}
function pos(event)
{
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX;
y = event.touches[0].pageY;
}else{
x = event.layerX;
y = event.layerY;
}
return {x:x,y:y};
}
 
function isTouch(event)
{
var type = event.type;
if(type.indexOf('touch')>=0){
return true;
}else{
return false;
}
}
 
function getWidth()
{
var xWidth = null;
 
if (window.innerWidth !== null) {
xWidth = window.innerWidth;
} else {
xWidth = document.body.clientWidth;
}
 
return xWidth;
}
</script>
</body>
</html>
